<template>
  <div style="display: flex; justify-content: space-between">
    <div class="sweep" v-if="isShowNavBar">
      <img src="@/assets/sweep.png" style="width: 40px; height: 30px;" alt="" @click="onSweep">
    </div>
    <div>
      <van-nav-bar
        v-if="isShowNavBar"
        fixed
        placeholder
        @click-right="onClickRight"
      >
        <template #right>
          <svg-icon class="text-[18px]" :name="useDarkMode() ? 'light' : 'dark'" />
        </template>
      </van-nav-bar>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useDarkMode, useToggleDarkMode } from "@/hooks/useToggleDarkMode";
import { computed } from "vue";
import tabBarRoutes from "@/router/tabBarRoutes";
import otherRoutes from "@/router/otherRoutes";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
const route = useRoute();
const onClickRight = () => {
  useToggleDarkMode();
};
const isShowNavBar = computed(() => {
  const showNavBarRoutePathList = [...tabBarRoutes, ...otherRoutes]
    .filter(item => item?.meta?.isShowNavBar)
    .map(item => item.path);
  return showNavBarRoutePathList.includes(route.path);
});
const onSweep = () => {
  ElMessage({
    message: "敬请期待~",
    type: "warning",
    plain: true
  });
  console.log("onSweep");
};
</script>

<style scoped>
.sweep {
  width: 30px;
  height: 30px;
  padding-left: 5px;
  padding-top: 5px;
  z-index: 999;
}
</style>
